<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>千锋商城</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./js/flexible.js">
</head>

<style>
    /* body {
        margin: 0;
    }

    div {
        width: 10.135135135135135rem;
        height: 8.108108108108109rem;
        background: red;
    } */
</style>

<body>

    <!-- <div></div> -->
    <!--头部-->
    <header id="header">
        <div class="fl logo">
            <a href="">
                <img src="./assets/images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app fr">
            <a href="">
                <img src="./assets/images/header_app.png" alt="">
            </a>
        </div>
    </header>
    <!--搜索-->
    <section id="search">
<div class="searchbox">
    <input type="text" name placeholder="请输入你想比价的产品">
</div>
<div class="button">
    <button>
        搜索
    </button>
</div>
    </section>
    <!--菜单-->
    <section id="menu">
<div class="container">
<div class="row" id="info">
    <div class="col">
        <a href="./pages/bijiao.htm">
            <span>
                <img src="./assets/images/ic_search.png" alt="比价搜索">
            </span>
        </a>
        <p class="in_name">比价搜索</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_cu.png" alt="省钱控">
            </span>
        </a>
        <p class="in_name">省钱控</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_coudanpin.png" alt="国内折扣">
            </span>
        </a>
        <p class="in_name">国内折扣</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_bcj.png" alt="白菜价">
            </span>
        </a>
        <p class="in_name">白菜价</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/haitao.png" alt="海淘折扣">
            </span>
        </a>
        <p class="in_name">海淘折扣</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_temai.png" alt="优惠券">
            </span>
        </a>
        <p class="in_name">优惠券</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_trend.png" alt="查看史价">
            </span>
        </a>
        <p class="in_name">查看史价</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/gengduo.png" alt="更多">
            </span>
        </a>
        <p class="in_name">更多</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_coudanpin.png" alt="凑单品">
            </span>
        </a>
        <p class="in_name">凑单品</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_kb.png" alt="口碑">
            </span>
        </a>
        <p class="in_name">口碑</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_mall.png" alt="商城导航">
            </span>
        </a>
        <p class="in_name">商城导航</p>
    </div>
    <div class="col">
        <a href="fenlei.html">
            <span>
                <img src="./assets/images/ic_pp.png" alt="品牌大全">
            </span>
        </a>
        <p class="in_name">品牌大全</p>
    </div>
</div>

</div>
    </section>
    <!--折扣推荐-->
    <section id="discount">
        <span class="f1">超值折扣推荐</span>
        <a href="">
            <img src="./assets/images/more.png" class="fr" alt="">
        </a>
    </section>
    <!--商品推荐-->
    <div class="productList">
        <ul></ul>
    </div>
    <!--底部-->
    <section id="footer">
<div class="more">
    <a href="">更多优惠信息</a>
</div>
<div class="chart">
    <span class="chart_in fl">品牌排行</span>
    <span class="more fr">
        <img src="./assets/images/more.png" alt="">
    </span>
</div>
<div class="login">
    <div class="container">
        <div class="ro">
            <a href="">
                <div class="col-xs-3">登入</div>
            </a>
            <a href="">
                <div class="col-xs-4">注册</div>
            </a>
            <a href="">
                <div class="col-xs-5">返回顶部</div>
            </a>
            <span></span>
        </div>
    </div>
<div class="content_b">
    <p>
        <a href="#">
            手机APP下载
        </a>
        <a href="#">
            万锋智慧商城手机版
        </a>
        -- 掌上比价平台
    </p>
    <p>
        chst.vip:8081/crm </p>
</div>
</div>
    </section>

  
    <!--js文件 注意引入的依赖关系-->
</body>
 
<script src="./js/index.js"></script>
<script>var pl=document.querySelector(".productList")
    const xhr=new XMLHttpRequest();

xhr.open("get","http://chst.vip:1234/api/getmoneyctrl",true);
xhr.send(null);
xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                let res = JSON.parse(xhr.responseText);
                console.log(res.result[1]);
                let regExp = /(?<=imgurl=)[^'"]*/;
                let ele = "";
                res.result.forEach(item => {
                    // console.log(item);
                    var img = regExp.exec(item.productImg2)[0];
                    ele += `<div productId="${item.productId}">
                            <img src="${img}" alt="">
                            <h5>${item.productName}</h5>
                            <p>${item.productPinkage}</p>
                            <span>${item.productTime}</span>
                        </div>`
                });
                pl.innerHTML = ele;
            }
        }
    }
</script>

</html>